<!--展示用户-->
<template>
    <div id="table">

      <el-dialog title="用户修改" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input v-model="form.userName" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="真实姓名" :label-width="formLabelWidth">
            <el-input v-model="form.realName" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="form.userPwd" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-input v-model="form.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth">
            <el-input v-model="form.tel" autocomplete="off"></el-input>
          </el-form-item>


        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="sure">确 定</el-button>
        </div>

      </el-dialog>

      <el-autocomplete
        class="inline-input"
        id="search"
        v-model="state2"
        :fetch-suggestions="querySearch"
        placeholder="请输入内容"
        :trigger-on-focus="false"
        @change="handleSelect"
        @select="handleSelect"
      ></el-autocomplete>
     
      <el-table
        :data="pagination"
        style="width: 100%"
        v-if="!state2"
        @row-click="update"
        >
        <el-table-column
          prop="id"
          label="编号"
          width="130"
          sortable
          column-key="id"
          >
        </el-table-column>
        <el-table-column
          prop="userName"
          label="用户名"
          width="130"
          sortable
          column-key="UserName"
          >
        </el-table-column>

        <el-table-column
          prop="realName"
          label="真实姓名"
          sortable
          width="250"
          >
        </el-table-column>
        <el-table-column
          prop="tel"
          sortable
          label="电话">
        </el-table-column>
        <el-table-column
          prop="email"
          sortable
          label="电子邮件">
        </el-table-column>
        <el-table-column
          prop="userPwd"
          sortable
          label="密码">
        </el-table-column>
        <el-table-column>
          <el-button type="primary" icon="el-icon-edit" circle
            @click="update()"
          ></el-button>
        </el-table-column>
      </el-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="totalItems"
          v-if="!state2"
          >
        </el-pagination>

      <el-table
        :data="pagination"
        style="width: 100%"
        v-else
        @row-click="update"
        >
        <el-table-column
          prop="id"
          label="编号"
          width="130"
          sortable
          column-key="id"
          >
        </el-table-column>
        <el-table-column
          prop="userName"
          label="用户名"
          width="130"
          sortable
          column-key="UserName"
          >
        </el-table-column>
        <el-table-column
          prop="realName"
          label="真实姓名"
          sortable
          width="250"
          >
        </el-table-column>
        <el-table-column
          prop="tel"
          sortable
          label="电话">
        </el-table-column>
        <el-table-column
          prop="email"
          sortable
          label="电子邮件">
        </el-table-column>
        <el-table-column
          prop="userPwd"
          sortable
          label="密码">
        </el-table-column>
        <el-table-column>
          <el-button type="primary" icon="el-icon-edit" circle
            @click="update()"
          ></el-button>
        </el-table-column>
      </el-table>

      <el-pagination @size-change="handleNewSizeChange" @current-change="handleNewCurrentChange" :current-page="currenNewPage"
        :page-sizes="pageNewSizes" :page-size="pageNewSize" layout="total, sizes, prev, pager, next, jumper"
        :total="totalNewItems"
        v-if="state2"
        >
      </el-pagination>
      
    </div>
    
  </template>
  
  <script>
import axios from 'axios'
  export default {
    data(){
      return{
        searchtable: [],
        pagination: [],
        currentPage: 1,
        // 分页的分界线
        start: 0,
        end: 10,
        pageSize: 6, // 每页显示的条目数量
        totalItems: 0, // 数据库中条目数量
        pageSizes: [6, 8, 10, 20] ,// 每页显示条目数量的选项

        currentNewPage: 1,
        Newstart: 0,
        Newend: 10,
        pageNewSizes: [6, 8, 10, 20],
        pageNewSize: 6,
        totalNewItems:0,

        restaurants: [],
        state2: '',
        tableData: [
          ],
          dialogFormVisible: false,
          form: {
            id:0,
            userName: '',
            realName: '',
            tel: '',
            email:'',
            userPwd:''
          },
          formLabelWidth: '120px'
      }
    },
    methods:{
      async sure()
      {
        let user = JSON.parse(localStorage.getItem("honey-user") || '{}')
        const config = {
            headers: {
                  // 设置内容类型为JSON
                  'Content-Type': 'application/json;charset=UTF-8',
                  // 添加token到请求头
                  'token': user.token || '',
              }
          }
          //this.$request.post('/updateuser',this.form).then(res => {
        const res = await axios.post('http://127.0.0.1:8000/updateuser',this.form,config)
        console.log(res)
        if (res && res.data && res.data.code === '200') {
            localStorage.removeItem('honey-user'); // 清除本地存储中的用户信息
            this.$router.push('/'); // 跳转到登录页面
        } else {
            // 如果更新失败，显示错误信息
            this.$message.error('更新失败，请重试');
        }
        this.dialogFormVisible = false
        //this.$request.get('/user').then(res1 => {
        const res1 = await axios.get('http://127.0.0.1:8000/user',config)
        this.tableData = res1.data.data
        this.fetchData()
          //})
        //})
      },
      handleSelect()
      {
        this.searchtable = this.tableData.filter(item => {
            return String(item.id) === this.state2
        })
        if(this.state2 == '')
            this.searchtable = this.tableData
        this.searchpage()
      },
      update(row)
      {
        this.form.id = row.id
        this.form.userName = row.userName
        this.form.realName = row.realName
        this.form.tel = row.tel
        this.form.userPwd = row.userPwd
        this.form.email = row.email
        this.dialogFormVisible = true
      },
      filterHandler(value, row, column) {
          const property = column['property'];
          return row[property] === value;
        },
      
        querySearch(queryString, cb) {
          var restaurants = this.restaurants;
          var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
          // 调用 callback 返回建议列表的数据
          cb(results);
        },
        createFilter(queryString) {
          return (restaurant) => {
            return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
          };
        },
        loadAll()
        {
          return [
          ]
        },
        fetchData () {
        this.start = (this.currentPage - 1) * this.pageSize
        this.end = this.start + this.pageSize
        this.pagination = this.tableData.slice(this.start, this.end)
        this.totalItems = this.tableData.length;
        this.totalNewItems = this.tableData.length;
      },
      searchpage(){
      this.Newstart = (this.currentNewPage - 1) * this.pageNewSize
      this.Newend = this.Newstart + this.pageNewSize
      this.pagination = this.searchtable.slice(this.Newstart, this.Newend)
      this.totalNewItems = this.searchtable.length;
    },
      handleSizeChange (newSize) {
        this.pageSize = newSize
        this.fetchData() // 更新每页显示的条目数量后重新请求数据
      },
      handleCurrentChange (newPage) {
        this.currentPage = newPage
        this.fetchData() // 更新当前页数后重新请求数据
      },
      handleNewSizeChange (newSize) {
      this.pageNewSize = newSize
      this.searchpage() // 更新每页显示的条目数量后重新请求数据
    },
        handleNewCurrentChange (newPage) {
        this.currentNewPage = newPage
        this.searchpage() // 更新当前页数后重新请求数据
    },
    },
    mounted() {
        this.restaurants = this.loadAll();
      },
    async created(){
        let user = JSON.parse(localStorage.getItem("honey-user") || '{}')
        const config = {
            headers: {
                // 设置内容类型为JSON
                'Content-Type': 'application/json;charset=UTF-8',
                // 添加token到请求头
                'token': user.token || '',
            }
        }
        //this.$request.post('/device',this.formLabelAlign).then(res => {
        const res = await axios.get('http://127.0.0.1:8000/user',config)
        console.log(res.data.data)
        this.tableData = res.data.data
        this.fetchData()
      //this.$request.get('/user').then(res => {
        if(res.data.code === '401')
            this.$router.push('/')
       
      //})
    }
  }
  </script>
  
  <style>
    #search{
      width: 600px;
      position: fixed;
      left: auto;
      top: 80px;
    }
    #table{
      line-height: 50px;
    }
    #searchicon{
      position: fixed;
      left: 1300px;
      top: 80px;
    }
  </style>